<template>
  <div class="forget-pwd-wrap">
    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">手机号</span>
        <div class="phone-con">
          <span v-if="findPhone" class="phone-num-find">{{findPhone}}</span>
          <input type="text" class="phone-num" placeholder="请输入当前手机号" maxlength="11" v-model="mobile" v-else/>
        </div>
      </div>
    </div>

    <div class="forget-verify-box">
      <div class="verify-con">
        <span class="verify-title">验证码</span>
        <div class="code-con">
          <div class="code-box">
            <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入验证码"
                   v-model="code"/>
          </div>
          <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
        </div>
      </div>
    </div>

    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">新密码</span>
        <div class="phone-con">
          <input type="password" class="phone-num" placeholder="请设置6-16位密码" maxlength="16" v-model="newPwd1"/>
        </div>
      </div>
    </div>
    <div class="forget-wx-phone">
      <div class="phone-box">
        <span class="title">确认密码</span>
        <div class="phone-con phone-dist">
          <input type="password" class="phone-num" placeholder="请再次输入新密码" maxlength="16" v-model="newPwd2"
                 @blur="inputBlur"/>
        </div>
      </div>
    </div>

    <button class="sure-text" type="button" @click="findPwd">确&nbsp;&nbsp;定</button>
  </div>
</template>


<script>
  import code from "../../components/code";
  import {checkCode, checkPhone, checkPwd} from "../../config/verify";
  import {getToken, mateCode, sendCode, setPsw} from "../../axios/api";
  import {salt} from "../../config/env";
  import md5 from 'js-md5';

  export default {
    data() {
      return {
        mobile: "",
        code: "",
        newPwd1: "",
        newPwd2: "",//确认密码
        token1: "",
        token2: "",
        findPhone: this.$route.query.findPhone
      }
    },
    methods: {
      affirmPwd() {
        let pwd1 = this.newPwd1;
        let pwd2 = this.newPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.mobile ? this.mobile : this.findPhone;
        if (checkPhone(phone)) {
          let param1 = {
            "phone": phone,
            "i": 1
          };
          this.$refs.timerBtn.setDisabled(true);
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 1,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              } else {
                this.$refs.timerBtn.stop();
                this.$vux.toast.text(res.msg, "middle");
              }
            });
          });
        }
      },
      findPwd() {
        let phone = this.mobile ? this.mobile : this.findPhone;
        let code = this.code;
        let pwd1 = this.newPwd1;
        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd1, 2) && this.affirmPwd()) {
          let param = {
            "phone": phone,
            "i": 1,
            "code": code,
            "token": this.token2
          };
          mateCode(param).then((res) => {//校验验证码
            if (res.code == 0) {
              let params = {
                "phone": phone,
                "password": md5(md5(pwd1) + salt)
              };
              setPsw(params).then((res) => {//忘记密码
                this.$vux.loading.hide();
                if (res.code == 0) {
                  if (res.data == 0) {
                    this.$vux.toast.text("密码修改失败，请重试", "middle");
                  } else {
                    this.$router.push('/login');
                  }
                } else {
                  this.$vux.toast.text(res.msg, "middle");
                }
              });
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .forget-pwd-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .forget-wx-phone {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .phone-box {
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        width: 96.8%;
        border-bottom: 0.027rem solid #f2f2f2;
        .title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .phone-con {
          margin-left: 0.92rem;
          .phone-num {
            .size-color(0.427rem, #333)
          }
          .phone-num-find {
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            .size-color(0.427rem, #333);
          }
        }
        .phone-dist {
          margin-left: 0.493rem;
        }
      }
    }
    .forget-verify-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .verify-con {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        .wh(96.8%, 1.333rem);
        background: #FFF;
        border-bottom: 0.027rem solid #f2f2f2;
        .verify-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
          padding-right: 0.92rem;
        }
        .code-con {
          display: flex;
          align-items: center;
          width: 7.147rem;
          justify-content: space-between;
          .code-box {
            display: flex;
            align-items: center;
            width: 60%;
            .code {
              .size-color(0.427rem, #333);
              width: 100%;
            }
          }
          .mobile {
            height: 0.8rem;
            line-height: 0.8rem;
            background: #FFF;
            .size-color(0.427rem, rgba(60, 175, 255, 1));
          }
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 1.2rem auto 0;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
